/**
 * Created by gilles on 14-02-15.
 */
"use strict";

// Déclaration des variables
var canvas = null,
    ctx = null,
    sel = null;

// Fonction principale
document.addEventListener ("DOMContentLoaded", function () {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    ctx.strokeStyle = 'rgb(125, 125, 125)';
    sel = new Lasso(canvas);
    ctx.lineWidth = sel.lineWidth;

    // Gestionnaires sur les 3 boutons
    document.getElementById("charger").addEventListener('click', function () {
        var img = new Image();
        img.src = 'image/afrique5.jpg';
        img.onload = function () {
            ctx.drawImage(img, 0, 0);

        };
    }, false);

    document.getElementById("selectionner").addEventListener('click', function () {
        // Toggle : Mise en état actif ou en état affiché
        if (sel.MODE_OFF == sel.mode) {
            sel.mode = sel.MODE_DISPLAYING;
            sel.afficher();
        } else {
            sel.mode = sel.MODE_OFF;
            sel.effacer();
        }
/*        if (localStorage.posSel) {
            posSel = JSON.parse(localStorage.posSel);
        }
        if (localStorage.dimSel) {
            dimSel = JSON.parse(localStorage.dimSel);
        }*/
    }, false);

    canvas.addEventListener('mouseup', function(){
        var texte =  sel.rect.pos1.x +","+sel.rect.pos1.y +","+ sel.rect.pos2.x +","+sel.rect.pos2.y;
        
        console.log(texte);
        var output = document.getElementById('coord').value=texte;

    });

    document.getElementById("sauvegarder").addEventListener('click', function () {
        var copyCanvas = document.createElement('canvas');
        copyCanvas.width = sel.imgData.width;
        copyCanvas.height = sel.imgData.height;
        copyCanvas.getContext('2d').putImageData(sel.imgData, 0, 0);
        canvas.parentElement.appendChild(copyCanvas);
    }, false);
//au onclick du canvas on recupere les cooordonne en x et y
    canvas.onclick = function(e) {
        var coords = getCoords(this,e);
        var positionClicx = coords.x;
        var positionClicy = coords.x;
        alert("Clic -> X:"+coords.x+" - Y:"+coords.y);
/*var iamin = false;
        canvas.pointIsIn()
        this.pointIsIn = function (posXY) {
            var is_inside_x = ((posXY.x >= this.pos1.x) && (posXY.x <= this.pos2.x)) || ((posXY.x >= this.pos2.x) && (posXY.x <= this.pos1.x));
            var is_inside_y = ((posXY.y >= this.pos1.y) && (posXY.y <= this.pos2.y)) || ((posXY.y >= this.pos2.y) && (posXY.y <= this.pos1.y));
            return is_inside_x && is_inside_y;
        }*/
    };


    // Pour déclencher manuelement l'événement de click sur le bouton charger
    document.getElementById("charger").dispatchEvent(new CustomEvent("click", {}));
    // Pour déclencher manuelement l'événement de click sur le bouton selectionner
    //document.getElementById("selectionner").dispatchEvent(new CustomEvent("click", {}));
});

